07. The Full Monty

INSTRUCTOR NOTE:

Examples:

• Picture element: art direction

• Picture element: with srcset and media queries

• Picturefill polyfill

Images are by Jon Q from Pearl Chen's HTML5 Rocks article Built-in Browser Support for Responsive Images.

You can download Picturefill here.

Element Queries will work like Media Queries, but with reference to the size of an element's parent container rather than viewport size. Browser implementation is in progress and in the meantime there's a polyfill here.

Lots of other <picture> use cases, examples and code snippets are available here.

Find out more about responsive images from the Responsive Images Community Group.